<template>
  <div>
    <h1>{{ clazzName }}班考勤列表</h1>

    <h2>待考勤课程</h2>
    <el-table :data="pendingAttendanceList" style="width: 100%; margin-bottom: 20px;">
      <el-table-column label="课程名称">
        <template #default="scope">
          <router-link :to="`/course-edit/${scope.row.id}`">{{ scope.row.courseName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="day" label="星期几" />
      <el-table-column prop="startPeriod" label="开始节次" />
      <el-table-column prop="endPeriod" label="结束节次" />
      <el-table-column label="操作">
        <template #default="scope">
          <router-link :to="`/edit-attendance/${scope.row.id}`">去考勤</router-link>
        </template>
      </el-table-column>
    </el-table>

    <h2>已考勤课程</h2>
    <el-table :data="completedAttendanceList" style="width: 100%; margin-bottom: 20px;">
      <el-table-column label="课程名称">
        <template #default="scope">
          <router-link :to="`/course-view/${scope.row.id}`">{{ scope.row.courseName }}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="day" label="星期几" />
      <el-table-column prop="startPeriod" label="开始节次" />
      <el-table-column prop="endPeriod" label="结束节次" />
      <el-table-column label="操作">
        <template #default="scope">
          <router-link :to="`/view-attendance/${scope.row.id}`">去查看</router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import service from '@/api';

export default {
  data() {
    return {
      clazzId: null,
      clazzName: '',
      pendingAttendanceList: [],
      completedAttendanceList: []
    }
  },
  created() {
    this.clazzId = this.$route.params.clazzId;
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const clazz = await service.get(`/api/clazz/${this.clazzId}`, null, "获取班级信息");
      this.clazzName = clazz.name;
      const { week, day } = this.$route.params;
      const attendanceList = await service.get(`/api/attendance/week/${week}/day/${day}/clazz/${this.clazzId}`, null, "获取考勤列表");
      const courseScheduleList = await service.get(`/api/courses_schedule/week/${week}/day/${day}/clazz/${this.clazzId}`, null, "获取课程安排");


      // 创建已考勤课程列表
      this.completedAttendanceList = attendanceList.map(attendance => ({
        id: attendance.id,
        courseName: attendance.courseSchedule.courseName,
        day: attendance.courseSchedule.day,
        startPeriod: attendance.courseSchedule.startPeriod,
        endPeriod: attendance.courseSchedule.endPeriod
      }));

      //去掉已经考勤的课程
      const pendingScheduleList = courseScheduleList.filter(item => attendanceList.findIndex(att => att.courseSchedule.id == item.id) < 0);

      // 创建待考勤课程列表
      this.pendingAttendanceList = pendingScheduleList.map(course => ({
        id: course.id,
        courseName: course.courseName,
        day: course.day,
        startPeriod: course.startPeriod,
        endPeriod: course.endPeriod
      }));

    }
  }
}
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}
</style>